<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
</body>
<script src="./MVVM/mvvm.js"></script>
<script src="./MVVM/observer.js"></script>
<script src="./MVVM/compile.js"></script>
<script src="./MVVM/watcher.js"></script>
<script>
    /*模板解析步骤
        1. 将挂载节点下的所有子节点放入文档碎片中
        2. 解析文档碎片(init)
                compileElement:
                    拿到文档碎片中的所有子节点,根据节点类型进行不一样的处理
                        元素节点
                        带{{}}的文本节点
                            compileText: 从工具类(compileUtil)中找到指定的工具
                                text:专门处理{{}}的编译工具
                                    bind: 工具类依赖的核心函数;
                                            去找更新器,为更新器提供数据(node exp在data中所对应的值)
                                        _getVMVal:找exp在data中所对应的值
                                            updaterFn:更新器去修改文档碎片
        3. 挂载解析完的文档碎片
      */

    var vm = new MVVM({
        el:"#app",
        data:{
            msg:"hello vue"
        }
    })

    console.log(vm.$compile)
</script>
</html>